import type { ReactNode } from "react";
import { Box, CssBaseline, useTheme, useMediaQuery } from "@mui/material";

interface LayoutProps {
  header: ReactNode;
  leftContent: ReactNode;
  middleContent: {
    top: ReactNode;
    middle: ReactNode;
    bottom: ReactNode;
  };
  rightContent: ReactNode;
}

export default function Layout({
  header,
  leftContent,
  middleContent,
  rightContent,
}: LayoutProps) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

  return (
    <Box sx={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      <CssBaseline />
      {/* トップバー */}
      <Box sx={{ bgcolor: "primary.main", color: "white", p: 2 }}>{header}</Box>

      {/*  */}
      <Box sx={{ display: "flex", flex: 1, overflow: "hidden" }}>
        {/* チャットルーム一覧 */}
        <Box
          sx={{
            width: { xs: "100%", sm: "30%" },
            bgcolor: "grey.100",
            p: 2,
            overflow: "auto",
          }}
        >
          {leftContent}
        </Box>

        {/* チャットルーム - スマホ時非表示 */}
        {!isMobile && (
          <Box
            sx={{
              width: "40%",
              display: "flex",
              flexDirection: "column",
              borderLeft: "1px solid",
              borderRight: "1px solid",
              borderColor: "divider",
            }}
          >
            {/* ルーム名 */}
            <Box
              sx={{ p: 2, borderBottom: "1px solid", borderColor: "divider" }}
            >
              {middleContent.top}
            </Box>

            {/* メッセージ履歴 */}
            <Box
              sx={{
                p: 2,
                flex: 1,
                overflow: "auto",
                bgcolor: "background.paper",
              }}
            >
              {middleContent.middle}
            </Box>

            {/* メッセージ入力 */}
            <Box
              sx={{
                p: 2,
                borderTop: "1px solid",
                borderColor: "divider",
                bgcolor: "grey.50",
              }}
            >
              {middleContent.bottom}
            </Box>
          </Box>
        )}

        {/* メンバー一覧 */}
        {!isMobile && (
          <Box
            sx={{
              width: "30%",
              bgcolor: "grey.50",
              p: 2,
              overflow: "auto",
            }}
          >
            {rightContent}
          </Box>
        )}
      </Box>
    </Box>
  );
}
